<template>
  <Card title="求职意向" @add="handleAdd()">
    <JI v-for="item in seekerStore.job_intentions" :data="item" @edit="handleEdit"></JI>
  </Card>

  <MeModal ref="editJIRef" width="600px" @ok="handleEditSave()">
    <n-form ref="JIFormRef" :model="form" :rules="rules">
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi label="期望职位" path="job_code" :span="12">
          <n-input v-model:value="job_name" @click="handleOpenJobSelect" class="cursor-pointer" />
        </n-form-item-gi>
        <n-form-item-gi label="期望类型" path="type" :span="12">
          <n-select v-model:value="form.type" :options="typeOps" />
        </n-form-item-gi>

        <n-form-item-gi label="期望地点" path="address_code" :span="12">
          <n-cascader
            v-model:value="form.address_code"
            expand-trigger="hover"
            :options="cities"
            :show-path="true"
            check-strategy="child"
          />
        </n-form-item-gi>
        <n-form-item-gi label="期望行业" path="industry_code" :span="12">
          <n-input
            v-model:value="industry_name"
            @click="handleOpenIndustrySelect"
            class="cursor-pointer"
          />
        </n-form-item-gi>
        <n-form-item-gi label="期望最低月薪" path="salary_min" :span="12">
          <n-input
            v-model:value="form.salary_min"
            :allow-input="onlyAllowNumber"
            style="margin-right: 10px"
          />
          <span style="margin-right: 20px">k</span>
        </n-form-item-gi>
        <n-form-item-gi label="期望最高月薪" path="salary_max" :span="12">
          <n-input
            v-model:value="form.salary_max"
            :allow-input="onlyAllowNumber"
            :disabled="!form.salary_min"
            style="margin-right: 10px"
          />
          <span style="margin-right: 20px">k</span>
        </n-form-item-gi>
      </n-grid>
    </n-form>
  </MeModal>

  <JobSelect ref="jobSelectRef" @click-job="handleClickJob"></JobSelect>
  <IndustrySelect ref="industrySelectRef" @click-industry="handleClickIndustry"></IndustrySelect>
</template>

<script setup>
import seekerApi from '@/api/seeker'
import { MeModal, JobSelect, IndustrySelect } from '@/components'
import { useSeekerStore } from '@/store'
import { useForm, useModal } from '@/composables'
import { cities, getJobName, getIndustriesName } from '@/data'
import Card from '../card.vue'
import JI from './jobIntentionItem.vue'
const seekerStore = useSeekerStore()
seekerStore.getJobIntention()

const rules = {
  job_code: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  type: { type: 'number', required: true, message: '此为必填项', trigger: ['blur'] },
  industry_code: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  address_code: { required: true, message: '此为必填项', trigger: ['blur'] },
  salary_min: {
    required: true,
    message: '此为必填项',
    trigger: ['blur'],
  },
  salary_max: [
    {
      required: true,
      message: '此为必填项',
      trigger: ['blur'],
    },
    {
      trigger: ['input', 'blur'],
      message: '不得低于最低薪资',
      validator: (rule, value) => {
        return parseInt(value) >= parseInt(form.value.salary_min)
      },
    },
  ],
}

const typeOps = [
  { value: 0, label: '实习' },
  { value: 1, label: '应届' },
  { value: 2, label: '全职' },
  { value: 3, label: '兼职' },
]

let job_name = computed(() => {
  return getJobName(form.value.job_code)
})

let industry_name = computed(() => {
  return getIndustriesName(form.value.industry_code)
})

//求职意向编辑框
const [editJIRef] = useModal()
const [JIFormRef, form, JIValidation] = useForm({})

//设置只允许输入数字
function onlyAllowNumber(value) {
  return !value || /^\d+$/.test(value)
}

function handleEdit(id) {
  const value = form.value
  const ji = seekerStore.job_intentions.find((o) => o.id === id)
  value.id = id
  value.job_code = ji.job_code
  value.type = ji.type
  value.industry_code = ji.industry_code
  value.address_code = ji.address_code
  value.salary_min = ji.salary_min.toString()
  value.salary_max = ji.salary_max.toString()
  editJIRef.value.open({ title: '编辑求职意向信息' })
}

function handleAdd() {
  const value = form.value
  value.id = null
  value.job_code = null
  value.type = null
  value.industry_code = null
  value.address_code = null
  value.salary_min = null
  value.salary_max = null
  editJIRef.value.open({ title: '添加求职意向信息', okText: '添加' })
}

async function handleEditSave() {
  await JIValidation()
  form.value.seeker_id = seekerStore.seeker.seeker_id
  await seekerApi.saveJobIntention(form.value)
  $message.success('保存成功')
  seekerStore.getJobIntention()
}

//打开职业类别选择框
const jobSelectRef = ref()
function handleOpenJobSelect() {
  jobSelectRef.value.open()
}
//设置点击目标的职业信息
function handleClickJob(job_obj) {
  form.value.job_code = job_obj.job_code
}

//打开行业选择框
const industrySelectRef = ref()
function handleOpenIndustrySelect() {
  industrySelectRef.value.open()
}
//设置点击目标的行业信息
function handleClickIndustry(industry_obj) {
  form.value.industry_code = industry_obj.industry_code
}
</script>
